<template>
	<view style="background-color: #FFFFFF;">
		<!-- 头部导航 -->
		<view class="header">
			
			
			<!-- Tab导航 -->
			<view class="tab-container">
				<view class="tab-item" :class="{ 'active': currentTab === 0 }" @click="switchTab(0)">
					商品(0)
				</view>
				<view class="tab-item" :class="{ 'active': currentTab === 1 }" @click="switchTab(1)">
					店铺(0)
				</view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<view v-if="currentTab === 0">
				<!-- 商品内容 -->
				<view class="empty-content">
					<text class="empty-text">暂无关注的商品</text>
				</view>
			</view>
			<view v-else-if="currentTab === 1">
				<!-- 店铺内容 -->
				<view class="empty-content">
					<text class="empty-text">暂无关注的店铺</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0 // 默认选中商品
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			switchTab(index) {
				this.currentTab = index;
				console.log('切换到tab:', index);
			}
		}
	}
</script>

<style>
.header {
	display: flex;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #F0F0F0;
	background-color: #FFFFFF;
}


.tab-container {
	display: flex;
	flex: 1;
	gap: 30px;
}

.tab-item {
	font-size: 16px;
	color: #333333;
	padding: 8px 0;
	position: relative;
}

.tab-item.active {
	color: #FF6B35;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #FF6B35;
}

.content {
	padding: 20px;
	background-color: #F8F8F8;
	min-height: 400px;
}

.empty-content {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 0;
}

.empty-text {
	color: #999999;
	font-size: 14px;
}
</style>
